/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-button {
	display: var(--pure-button-display, inline-flex);
	margin: var(--pure-button-margin);
	padding: var(--pure-button-padding, 0 16px);
	font-size: var(--pure-button-font-size, inherit);
	font-weight: var(--pure-button-font-weight);
	border-radius: var(--pure-button-border-radius, var(--pure-radius-small));
	line-height: var(--pure-button-line-height);
	width: var(--pure-button-width);
	height: var(--pure-button-height, 2.935em);
	background: none;
	border: var(
		--pure-button-border,
		var(--pure-button-border-width, 0) var(--pure-button-border-style, solid)
			var(--pure-button-border-color, currentColor)
	);
	position: relative;
	color: var(--pure-button-color, inherit);
	flex-shrink: 0;

	&::before,
	&::after {
		border: none;
		outline: none;
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--pure-button-background, var(--pure-background-light));
		z-index: 0;
		opacity: var(--pure-button-background-opacity, 1);
	}

	&__content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--pure-button-gap, 4px);
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	&__icon {
		font-size: var(--pure-button-icon-font-size, var(--pure-font-size-large));
		color: var(--pure-button-icon-color);
		font-weight: var(--pure-button-icon-font-weight);
		flex-shrink: 0;
		margin: var(--pure-button-icon-margin);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&--loading {
			animation: animationPureSpin var(--pure-button-loading-animation-duration, 1000ms)
				var(--pure-button-loading-animation-timing-function, linear) 0s infinite;
			font-size: var(--pure-button-loading-icon-font-size, inherit);
			color: var(--pure-button-loading-icon-color, inherit);
			font-weight: var(--pure-button-loading-icon-font-weight, inherit);
			margin: var(--pure-button-loading-icon-margin, inherit);
		}

		&--front {
			font-size: var(--pure-button-front-icon-font-size, inherit);
			color: var(--pure-button-front-icon-color, inherit);
			font-weight: var(--pure-button-front-icon-font-weight, inherit);
			margin: var(--pure-button-front-icon-margin, inherit);
		}

		&--after {
			font-size: var(--pure-button-after-icon-font-size, inherit);
			color: var(--pure-button-after-icon-color, inherit);
			font-weight: var(--pure-button-after-icon-font-weight, inherit);
			margin: var(--pure-button-after-icon-margin, inherit);
		}
	}

	// 边框按钮
	&--border {
		border-width: var(--pure-button-border-width, 1px);
	}

	// 禁用状态
	&--disabled {
		opacity: var(--pure-button-disabled-opacity, var(--pure-opacity-disabled));
		cursor: not-allowed;
		pointer-events: none;
	}

	// 主题按钮
	&--theme {
		color: var(--pure-button-color, var(--pure-text-color-invert));

		&::before {
			background: var(--pure-button-background, var(--pure-button-theme));
		}
	}

	// 幽灵按钮
	&--ghost {
		color: var(--pure-button-color, var(--pure-button-theme));
		border-color: var(--pure-button-border-color, var(--pure-button-theme, currentColor));
		border-width: var(--pure-button-border-width, 1px);

		&::before {
			opacity: var(--pure-button-background-opacity, var(--pure-opacity-ghost));
		}
	}

	// 镂空按钮
	&--plain {
		color: var(--pure-button-color, var(--pure-button-theme));
		border-color: var(--pure-button-border-color, var(--pure-button-theme, currentColor));
		border-width: var(--pure-button-border-width, 1px);

		&::before {
			opacity: var(--pure-button-background-opacity, 0);
		}
	}

	// 按钮形状
	&--shape {
		// 矩形按钮
		&--square {
			border-radius: var(--pure-button-square-radius, var(--pure-radius-none));
		}

		// 圆角按钮
		&--round {
			border-radius: var(--pure-button-round-radius, var(--pure-radius-round));
		}

		// 方块按钮
		&--cube {
			width: var(--pure-button-width, 2.935em);
			height: var(--pure-button-height, 2.935em);
			padding: var(--pure-button-padding, 0);
		}

		// 圆形按钮
		&--circle {
			width: var(--pure-button-width, 2.935em);
			height: var(--pure-button-height, 2.935em);
			padding: var(--pure-button-padding, 0);
			border-radius: var(--pure-button-border-radius, var(--pure-radius-circle));
		}
	}

	// 块状按钮
	&--block {
		width: var(--pure-button-width, 100%);
		display: var(--pure-button-display, block);
	}

	// 链接按钮
	&--link {
		display: var(--pure-button-display, inline-flex);
		border: var(--pure-button-border, none);
		padding: var(--pure-button-padding, 0);
		width: var(--pure-button-width, auto);
		height: var(--pure-button-height, auto);
		color: var(--pure-button-color, var(--pure-button-theme, inherit));

		&::before {
			background: var(--pure-button-background, transparent);
		}

		.pure-button__content {
			gap: var(--pure-button-gap, 0);
		}
	}

	// 下划线
	&--underline {
		&::after {
			content: "";
			position: absolute;
			top: var(--pure-button-underline-top, auto);
			bottom: var(--pure-button-underline-bottom, 0);
			left: var(--pure-button-underline-left, 0);
			width: var(--pure-button-underline-width, 100%);
			height: var(--pure-button-underline-height, 1px);
			background: var(--pure-button-underline-color, currentColor);
			transform: var(--pure-button-underline-transform, none);
		}
	}
}
